<template>
  <div class="container">
    <!-- 页面头部 -->
    <div class="navbar">
      <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/about">AI问答</router-link></li>
      <li><router-link to="/search">知识检索</router-link></li>
      <li><router-link to="/jiansuo">药物检索</router-link></li>
      <li><router-link to="/" class="logout-button">退出登录</router-link></li>
      </ul>
    </div>

    <!-- 药物检索部分 -->
    <div class="search-box">
      <div style="display:flex">

          <div style="width:100%;padding-top:100px;padding-left: 75px;">
          <el-input
              v-model="entity_name"
              placeholder="请输入药物名"
              style="width:650px;"
          ></el-input>
          <el-button
              style="background:#5b78c7;margin-left:20px;"
              type="primary"
              icon="el-icon-search"
              @click="searchDrug"
          >查询</el-button>
          <br><br>

      </div>
      </div>
  </div>

  <div class="drug-results">
    <router-link
      v-for="(drug, index) in paginatedDrugs"
      :key="index"
      :to="{ name: 'drug-detail', params: { id: drug.id } }"
      class="card-link"
    >
      <div class="card">
        <div class="drug-details">
          <h3>{{ drug.name }}</h3>
          <p>功效：{{ drug.effect }}</p>
        </div>
      </div>
    </router-link>
  </div>

    <!-- 翻页控件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="displayedDrugs.length"
        :page-size="pageSize"
        v-model="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      entity_name: '',
      displayedDrugs: [],
      allDrugs: [], // 保存所有药物，便于计算总数
      currentPage: 1,
      pageSize: 6
    };
  },
  computed: {
    paginatedDrugs() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.displayedDrugs.slice(start, end);
    }, validDrugs() {
      // 只返回有 id 的药物
      console.log('paginatedDrugs:', this.paginatedDrugs);
      return this.paginatedDrugs.filter(drug => drug && drug.id);
    }
  },
  methods: {
    async searchDrug() {
      try {
        const response = await axios.get('/search_drug/', {
          params: { entity_name: this.entity_name }
        });
        console.log('接口返回数据:', response.data);
        this.allDrugs = response.data.drugs; // 保存所有药物
        this.displayedDrugs = this.allDrugs; // 显示所有药物
        this.currentPage = 1; // 查询后重置到第一页
      } catch (error) {
        console.error('查询失败:', error);
      }
    },
    handlePageChange(page) {
      this.currentPage = page; // 更新当前页
    }
  },
  mounted() {
    this.searchDrug(); // 页面加载时自动查询所有药物
  }
};
</script>

<style scoped>
.container {
  background-color: rgba(218, 235, 251, 0.497);
  top:-300px;
  height: 75vw;
  width: 100%;
  background-color:  rgb(230, 241, 250);
}

.navbar {
  position: fixed;
  top: 0;
  left:-10px;
  width: 100vw;
  height:80px;
  background-color:rgba(218, 235, 251, 0.497);
  z-index: 999;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.navbar ul li {
  position: relative;
  padding-left:50px;
  padding-top:5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.navbar a {
  text-decoration: none;
  color: black;
  padding: 8px 16px;
}

.navbar a:visited {
  color: black;
}

.navbar a:hover {
  background-color:rgba(240, 248, 255, 0.599);
}

.navbar a:active, .navbar a:focus {
  color: black;
}

.navbar ul li .logout-button {
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
  position: relative;
  background-color: #3967ff;
  color: #fff;
  cursor: pointer;
  border: none;
}

.navbar ul li .logout-button:hover {
  background-color: #0056b3;
}

.search-box {
  display: flex;
  justify-content: center;
}

.drug-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
  margin-top: 20px;
}

.card-link {
  text-decoration: none;
  display: block;
}

.card {
  width: 300px;
  height: 300px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card h3 {
  font-size: 20px;
  color: #3967ff;
}

.card p {
  font-size: 16px;
  color: #666;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pagination-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}
</style>
